<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <title>表格合并</title>
	<link rel="stylesheet" href="css/base.css" type="text/css" />
    <link rel="stylesheet" href="css/bootstrap-3.3.4.css">
    <script type="text/javascript" src="js/jszip.min.js"></script>
    <script type="text/javascript" src="js/FileSaver.js"></script>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="js/excel-gen.js"></script>
</head>
<body>

<div class="container">
    <h2>基础指标分析</h2>
    <div class="row center-block">
        <div class="col-md-12">
            <div class="table-responsive ">
                <table id="process-demo-1" class="table table-bordered table-striped table-hover table-condensed">
                    <thead>
                    <tr>
                        <th>col0</th>
                        <th>col1</th>
                        <th>col2</th>
                        <th>col3</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>SuZhou</td>
                        <td>11111</td>
                        <td>22222</td>
                        <td>SuZhouCity</td>
                    </tr>
                    <tr>
                        <td>SuZhou</td>
                        <td>33333</td>
                        <td>44444</td>
                        <td>SuZhouCity</td>
                    </tr>
                    <tr>
                        <td>SuZhou</td>
                        <td>55555</td>
                        <td>66666</td>
                        <td>SuZhouCity</td>
                    </tr>
                    <tr>
                        <td>ShangHai</td>
                        <td>77777</td>
                        <td>88888</td>
                        <td>ShangHaiCity</td>
                    </tr>
                    <tr>
                        <td>ShangHai</td>
                        <td>uuuuu</td>
                        <td>hhhhh</td>
                        <td>ShangHaiCity</td>
                    </tr>
                    <tr>
                        <td>ShangHai</td>
                        <td>ggggg</td>
                        <td>ccccc</td>
                        <td>ShangHaiCity</td>
                    </tr>
                    <tr>
                        <td>GuangZhou</td>
                        <td>ttttt</td>
                        <td>eeeee</td>
                        <td>GuangZhouCity</td>
                    </tr>
                    <tr>
                        <td>GuangZhou</td>
                        <td>ppppp</td>
                        <td>qqqqq</td>
                        <td>GuangZhouCity</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="c-main ptb20">
    <h3 class="mt30 mb10">内容自动合并:</h3>




    <h3 class="mt30 mb10">指定单列合并:</h3>
    <table id="process-demo-2" class="tb tb-b c-100 c-t-center">
        <thead>
        <tr>
            <th>col0</th>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>SuZhou</td>
            <td>11111</td>
            <td>22222</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>SuZhou</td>
            <td>33333</td>
            <td>44444</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>SuZhou</td>
            <td>55555</td>
            <td>66666</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>77777</td>
            <td>88888</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>uuuuu</td>
            <td>hhhhh</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>ggggg</td>
            <td>ccccc</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>GuangZhou</td>
            <td>ttttt</td>
            <td>eeeee</td>
            <td>GuangZhouCity</td>
        </tr>
        <tr>
            <td>GuangZhou</td>
            <td>ppppp</td>
            <td>qqqqq</td>
            <td>GuangZhouCity</td>
        </tr>
        </tbody>
    </table>


    <h3 class="mt30 mb10">指定多列合并:</h3>
    <table id="process-demo-3" class="tb tb-b c-100 c-t-center">
        <thead>
        <tr>
            <th>col0</th>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>SuZhou</td>
            <td>11111</td>
            <td>22222</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>SuZhou</td>
            <td>33333</td>
            <td>44444</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>SuZhou</td>
            <td>55555</td>
            <td>66666</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>77777</td>
            <td>88888</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>uuuuu</td>
            <td>hhhhh</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>ggggg</td>
            <td>ccccc</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>GuangZhou</td>
            <td>ttttt</td>
            <td>eeeee</td>
            <td>GuangZhouCity</td>
        </tr>
        <tr>
            <td>GuangZhou</td>
            <td>ppppp</td>
            <td>qqqqq</td>
            <td>GuangZhouCity</td>
        </tr>
        </tbody>
    </table>

    <h3 class="mt30 mb10">xxxxxx:</h3>


    <table id="process-demo-4" class="tb tb-b c-100 c-t-center">
        <thead>
        <tr>
            <th>col0</th>
            <th>col0</th>
            <th>col2</th>
            <th>col3</th>
        </tr>
        <tr>
            <th>col0</th>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>SuZhou</td>
            <td>11111</td>
            <td>22222</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>SuZhou</td>
            <td>33333</td>
            <td>44444</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>SuZhou</td>
            <td>55555</td>
            <td>66666</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>77777</td>
            <td>88888</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>uuuuu</td>
            <td>hhhhh</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>ggggg</td>
            <td>ccccc</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>GuangZhou</td>
            <td>ttttt</td>
            <td>eeeee</td>
            <td>GuangZhouCity</td>
        </tr>
        <tr>
            <td>GuangZhou</td>
            <td>ppppp</td>
            <td>qqqqq</td>
            <td>GuangZhouCity</td>
        </tr>
        </tbody>
    </table>
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/tablesMergeCell.js"></script>

<script type="text/javascript">
    $(function(){
        $('#process-demo-1').tablesMergeCell({
            cols: [0,3]
        });

        $('#process-demo-2').tablesMergeCell({
            automatic: false,
            cols: [0],
            rows: [0,1,2]
        });

        $('#process-demo-3').tablesMergeCell({
            automatic: false,
            cols: [0,3],
            rows: [[3,4,5],[6,7]]
        });

        $('#process-demo-4').tablesMergeCell({
            automatic: false,
            cols: [0,1],
            rows: [1,2]

        });
    });
</script>
</body>
</html>